<template>
  <!-- 假设这是批改作业页面的模板 -->
  <div class="correction-page">
    <div v-if="studentCompletion" class="student-info">
      <p class="student-name ">姓名: {{ studentCompletion.studentName }}</p>
      <p class="homework-content"> 内容: {{ studentCompletion.homeworkDetails }}</p>
      <!-- 假设图片URL是有效的，并且可以直接显示 -->
      <div v-if="studentCompletion.homeworkUrl" class="homework-image-container">
        <img :src="getImageUrl(studentCompletion.homeworkUrl)" alt="学生作业图片" class="homework-image">
      </div>
    </div>
  </div>
  <Row style="display: flex; margin-left: 50px">
    <input type="number" v-model="scoreInput" class="score-input" />
    <button @click="submitCorrection" class="submit-button">提交成绩</button>
  </Row>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getOssPrefix } from "@/v-api/properties";
import axios from 'axios';
import {Row,Toast} from "vant";

// 使用ref创建响应式变量存储成绩输入
const scoreInput = ref(null);
// 获取当前路由对象
const route = useRoute();
const prefix = getOssPrefix();

// 使用ref创建响应式变量存储学生完成情况
const studentCompletion = ref(null);

// 组件挂载时获取路由参数并尝试解析
if (route.params.studentCompletion) {
  try {
    studentCompletion.value = JSON.parse(route.params.studentCompletion);
  } catch (e) {
    console.error('Error parsing studentCompletion data:', e);
  }
}

// 根据提供的homeworkUrl获取完整的图片URL
const getImageUrl = (homeworkUrl) => {
  return homeworkUrl ? prefix + homeworkUrl : '';
};

// 提交成绩的函数
const submitCorrection = async () => {
  if (!studentCompletion.value) return; // 如果没有学生作业详情，不执行提交

  // 准备提交的数据对象
  const data = {
    id: studentCompletion.value.stuHomeworkInfoId,
    score: scoreInput.value
  };


  try {
    // 使用axios发送POST请求到后端，确保请求体是JSON格式
    const response = await axios.post('/api/homework/correctHomework', data, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 根据响应判断操作是否成功
    if (response.data === "批改成功") {
      Toast.success("批改成功！");
    } else {
      Toast.fail("批改失败，请重试！");
    }
  } catch (error) {
    console.error('Error submitting the score:', error);
    Toast.fail("批改失败，请重试！");
  }
};
</script>

<style scoped>
.correction-page {
  padding: 20px; /* 页面内边距 */
  max-width: 800px; /* 定义最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

.student-info {
  padding: 20px; /* 内边距 */
  border: 2px solid #9caf70; /* 边框颜色 */
  border-radius: 8px; /* 边框圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-top: 20px; /* 上边距 */
}

.student-name {
  margin: 0 15px 10px;
  font-size: 16px; /* 学生姓名字体大小 */
font-weight: bold;
}

.homework-content {
  margin: 10px 0; /* 上下边距 */
  padding: 15px; /* 内边距 */
  border: 1px solid #9caf70; /* 作业内容边框 */
  border-radius: 4px; /* 边框圆角 */
  background-color: rgba(249, 249, 249, 0.49); /* 背景颜色 */
  font-size: 16px; /* 字体大小 */
  line-height: 1.6; /* 调整行高以适应多行文本 */
  max-width: 100%; /* 最大宽度为容器宽度，防止溢出 */
  word-wrap: break-word; /* 长单词或URL可以换行 */
  min-height: 100px; /* 定义最小高度以确保即使内容较少也有固定空间 */
  max-height: 300px; /* 定义最大高度以限制内容区域大小 */
  overflow: auto; /* 如果内容超出最大高度，显示滚动条 */
}

.homework-image-container {
  text-align: center; /* 使图片居中显示 */
  margin-top: 20px; /* 上边距 */
}

.homework-image {
  max-width: 80%;
  height: auto;
  border: 1px solid #ddd; /* 图片边框 */
  padding: 5px; /* 图片周围留白 */
  background-color: #fff; /* 图片背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 图片阴影 */
}



.score-input {
  margin-right: 10px;
  padding: 8px 15px;
  border: 1px solid #9caf70; /* 作业内容边框 */
  border-radius: 4px; /* 边框圆角 */
  width: 100px;
  height: 35px;
}

.submit-button {
  padding: 8px 15px;
  border: 1px solid #9caf70; /* 作业内容边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer;
  font-size: 14px;
  width: 100px;
  height: 50px;
  background-color: rgba(165, 214, 63, 0.71);
}


</style>